<style lang="scss" scoped>
	@import '@/assets/css/variable';

	.myCourse {
		width: 100%;
		background-color: $main-bgc-white;
		min-height: 100%;
		font-size: 1.2rem;
		box-sizing: border-box;
		position: relative;
		flex:1;
		overflow: hidden;
		$radiusSize: 100%;
		.list {
			// padding-bottom: 1rem;
			.item {
				// margin-top: 0.4rem;
				// margin-left: 1rem;
				// margin-right: 1rem;
				padding: 0.8rem 1.6rem;
				background-color: white;
				margin-top: 1rem;
				.flex2 {
					display: flex;
					
					.flex2-left {
						flex: 0 0 80px;
						height: 60px;
						border-radius: 0.6rem;
						overflow: hidden;
						position: relative;
						.tag{
							background-color: #FE280B;
							padding: 0.2rem 0.5rem;
							border-bottom-left-radius: 0.8rem;
							color:white;
							position: absolute;
							right: 0;
							top: 0;
							border: 0.1rem solid white;
							.text{
								font-size: 12px;
								transform: scale(0.8); //缩放0.8倍
								color:white;
								display: block;
							}
						}
					}
		
					.flex2-right {
						margin-left: 6px;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
		
						.title {
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							/* 设置行数 */
							-webkit-box-orient: vertical;
							color: $color0;
							font-size: 1.6rem;
							line-height: 1.2em;
							overflow: hidden;
						}
		
						.desc {
							// margin-top: 0.6rem;
							span {
								color: $color2;
		
								&.split {
									font-size: 1rem;
								}
							}
						}
						.line{
							display: flex;
							align-items: center;
							.xiajiele{
								color: $color2;
							}
							.badgeBox {
								margin-left: 0.6rem;
								.badge {
									padding: 0.1rem 0.5rem;
									font-size: 1.1rem;
									border-radius: 0.3rem;
									box-sizing: border-box;
									overflow: hidden;
								}
								
								.badge3 {
									padding: 0.1rem 0.8rem;
									font-size: 1.2rem;
									transform: scale(0.8);
									background-color: #E4EAFF;
									color: #4970FD;
									border: 0.1rem solid #4970FD;
									border-radius: 0.3rem;
									box-sizing: border-box;
									overflow: hidden;
								}
								.badge1 {
									padding: 0.1rem 0.8rem;
									font-size: 1.2rem;
									transform: scale(0.8);
									background-color: #FFECDC;
									color: #FF7E16;
									border: 0.1rem solid #FF7E16;
									border-radius: 0.3rem;
									box-sizing: border-box;
									overflow: hidden;
								}
								.badge2 {
									padding: 0.2rem 1rem;
									font-size: 1.2rem;
									background-color: #E8E9E9;
									color: #999;
									border: 0.1rem solid #999;
									border-radius: 0.3rem;
									box-sizing: border-box;
									overflow: hidden;
								}
								
								.badge4baoming {
									background-color: #FFECDC;
									color: #FF6D00;
									border: 0.1rem solid #FF6D00;
								}
									
								.badge4wancheng {
									background-color: #E8E9E9;
									color: #999;
									border: 0.1rem solid #999;
								}
								
								.badge4jinxing {
									background-color: #DCF5EC;
									color: #15BC83;
									border: 0.1rem solid #15BC83;
								}
							}
						}
						
					}
				}
			}
		}
	}
</style>
<template>
	<div class="myCourse">
		<div class="list">
			<div class="item" v-for="item in courseData" :key="item.id" @click="toDetailView(item)">
				<div class="flex2">
					<div class="flex2-left">
						<van-image width="80" height="60" fit="cover" :src="item.images" />
						<div class="tag" v-if="item.type==2">
							<span class="text">线下课</span>
						</div>
					</div>
					<div class="flex2-right">
						<div class="title">{{item.coursename}}</div>
						<div class="desc">
							<span>{{item.classes}}</span>
						</div>
						<div class="line">
							<div class="xiajiele">下节课:{{$utils.parseToDateYMD(item.start_time)}}</div>
							<div class="badgeBox">
								<span :class="$utils.getStatusBadge(item.start)">{{item.startName}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import {
		myMixins
	} from "@/assets/js/mixins.js"
	export default {
		name: "myCourse",
		mixins: [myMixins],
		components: {
			
		},
		data() {
			return {
				courseData:''
			}
		},
		created() {
			const _this = this;
			// this.getCode()
		},
		mounted() {
			// document.title="电大社区教育"
			// this.courseData = this.$store.state.courseData
			// this.zixunList = this.$store.state.zixunList
			this.LearningMyCourse()
		},
		methods: {
			toDetailView(item) {
				console.log(item)
				if(item.type==2){
					this.$router.push(`/course/detail4xx?id=${item.course_id}&type=${item.type}&fromView=1`)
				}else{
					this.$router.push(`/course/detail4xs?id=${item.course_id}&type=${item.type}&fromView=1`)
				}
			},
			toSelectView() {
				console.log("click")
				this.$router.push('/selectCampus')
			},
			LearningMyCourse() {
				const _this = this;
				let params = {
					type_id: '',
					openid:this.$store.state.openid || localStorage.getItem('openid'),
					campus_id: JSON.parse(localStorage.getItem('selectedCampus')).id,
					pageNo: 1,
					pageSize: 100
				}
				_this.$request.LearningMyCourse(params).then(res => {
					let data = res.data.data
					_this.courseData = data
					// _this.list.push(...data)
					// console.log(_this.list.length)
					// if (_this.pageNo >= (Math.ceil(res.data.totalCount / _this.pageSize))) {
					// 	_this.finished = true;
					// } else {
					// 	_this.pageNo++
					// }
					// this.$store.commit('setCaseList', this.caseList);
				}).finally(() => {
					console.log('finally')
				})
			},
		}
	};
</script>
